<template>
<!-- 附加表五运输信息增加 -->
  <div class="tb">
    <mt-field label="车牌号码:" placeholder="请输入" type="text" v-model="fzdcbfd62019001"></mt-field>
    <mt-field label="车牌颜色:" placeholder="请输入" type="text" :readonly="true" v-model="currentTagsColor.name" @click.native.capture="choseColor"></mt-field>
    <mt-field label="趟次序号:" placeholder="请输入" type="text" v-model="fzdcbfd62019002"></mt-field>
    <mt-field label="开始日期:" placeholder="请输入" type="date" v-model="fzdcbfd62019003"></mt-field>
    <mt-field label="结束日期:" placeholder="请输入" type="date"  v-model="fzdcbfd62019004"></mt-field>
    <mt-field label="起点名称:" placeholder="请输入" type="text" :readonly="true" v-model="fzdcbfd62019005" @click.native.capture="showStart1"></mt-field>
    <mt-field label="起点行政区划代码:" placeholder="请输入" type="text"  v-model="fzdcbfd62019006"></mt-field>
    <mt-field label="终点名称:" placeholder="请输入" type="text" :readonly="true" v-model="fzdcbfd62019007" @click.native.capture="showStart2"></mt-field>
    <mt-field label="终点行政区划代码:" placeholder="请输入" type="text" v-model="fzdcbfd62019008"></mt-field>
    <!-- <mt-field label="货物种类名称:" placeholder="请输入" type="text" v-model="fzdcbfd62019009"></mt-field>-->
    
    <mt-field
      label="货物种类:"
      placeholder="请输入"
      type="text"
      :readonly="true"
      v-model="currentTags.name"
      @click.native.capture="choseHwzl" 
    ></mt-field>
    <mt-field label="详细货物名称:" placeholder="请输入" type="text" v-model="fzdcbfd62019022"></mt-field> 
    <mt-field label="载货里程（公里）:" placeholder="请输入" type="number" v-model="fzdcbfd62019011"></mt-field>

    <mt-field label="高速公路里程（公里）:" placeholder="请输入" type="number" v-model="fzdcbfd62019012"></mt-field>
    <mt-field label="货运量（吨）:" placeholder="请输入" type="number" v-model="fzdcbfd62019013"></mt-field>
    <mt-field label="货物周转量（吨公里）:" placeholder="请输入" type="number" v-model="fzdcbfd62019014"></mt-field>
    <mt-field label="集装箱箱运量（TEU）:" placeholder="请输入" type="number" v-model="fzdcbfd62019015"></mt-field>
    <mt-field label="收入（元）:" placeholder="请输入" type="number" v-model="fzdcbfd62019016"></mt-field>
    <mt-field label="计价方式:" placeholder="请输入"  type="text" :readonly="true" v-model="fzdcbfd62019017" @click.native.capture="choseJjfs"></mt-field>
    <mt-field label="成本（元）:" placeholder="请输入" type="number" v-model="fzdcbfd62019018"></mt-field>
    
    <div class="button">
      <mt-button type="primary" size="large" @click="check">确定</mt-button>
    </div>
    <mt-popup
      v-model="popupVisible"
      popup-transition="popup-fade"
      closeOnClickModal="true"
      position="bottom">
      <mt-picker :slots="slots" showToolbar ref="picker" value-key="name">
        <div class="picker-toolbar-title">
          <div class="usi-btn-cancel" @click="popupVisible = !popupVisible">取消</div>
          <div class>{{message}}</div>
          <div class="usi-btn-sure" @click="handleConfig">确定</div>
        </div>
      </mt-picker>
    </mt-popup>
    <mt-popup
      v-model="popupVisible3"
      popup-transition="popup-fade"
      closeOnClickModal="true"
      position="bottom">
      <mt-picker :slots="slotsJjfs"  showToolbar ref="pickerJjfs" value-key="name">
        <div class="picker-toolbar-title">
          <div class="usi-btn-cancel" @click="popupVisible3 = !popupVisible3">取消</div>
          <div class>请选择计价方式</div>
          <div class="usi-btn-sure" @click="handleConfig1">确定</div>
        </div>
      </mt-picker>
    </mt-popup>
    <!-- 起点选择器 -->
    <mt-popup
      v-model="popupVisible1"
      popup-transition="popup-fade"
      closeOnClickModal="true"
      position="bottom"
    >
    <mt-picker :slots="slotss" @change="onValuesChange1"  value-key="value" showToolbar>
        <mt-header title="选择省市区">
              <mt-button slot="left" class="cancle" @click="popupVisible1 = !popupVisible1">取消</mt-button> 
              <mt-button slot="right" class="sure" @click="sure">确定</mt-button>                       
            </mt-header>   
        </mt-picker> 
    </mt-popup>
    <!-- 终点选择器 -->
    <mt-popup
      v-model="popupVisible2"
      popup-transition="popup-fade"
      closeOnClickModal="true"
      position="bottom"
    >
    <mt-picker :slots="slotss" @change="onValuesChange1"  value-key="value" showToolbar>
        <mt-header title="选择省市区">
              <mt-button slot="left" class="cancle" @click="popupVisible2 = !popupVisible2">取消</mt-button> 
              <mt-button slot="right" class="sure" @click="sure1">确定</mt-button>                       
            </mt-header>   
        </mt-picker> 
    </mt-popup>
    <!-- 车牌颜色选择器 -->
    <mt-popup
      v-model="popupVisibleColor"
      popup-transition="popup-fade"
      closeOnClickModal="true"
      position="bottom">
      <mt-picker :slots="slotsColor"  showToolbar ref="pickerColor" value-key="name">
        <div class="picker-toolbar-title">
          <div class="usi-btn-cancel" @click="popupVisibleColor = !popupVisibleColor">取消</div>
          <div class>请选择车牌颜色</div>
          <div class="usi-btn-sure" @click="handleConfigColor">确定</div>
        </div>
      </mt-picker>
    </mt-popup>
  </div>
</template>
    
    <script>
import { Field } from "mint-ui";
import { Picker } from "mint-ui";
import { Popup } from "mint-ui";
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      recid: "",
      yhmlk: "",
      fzdcbfd62019001: "", // 车牌号码
      fzdcbfd62019002: "", 
      fzdcbfd62019003: "", 
      fzdcbfd62019004: "", 
      fzdcbfd62019005: "", 
      fzdcbfd62019006: "", 
      fzdcbfd62019007: "", 
      fzdcbfd62019008: "", 
      fzdcbfd62019009: "", 
      fzdcbfd62019010: "", 
      fzdcbfd62019011: "", 
      fzdcbfd62019012: "", 
      fzdcbfd62019013: "", 
      fzdcbfd62019014: "",
      fzdcbfd62019015: "",
      fzdcbfd62019016: "",
      fzdcbfd62019017: "",
      fzdcbfd62019018: "", 
      fzdcbfd62019019: "", 
      fzdcbfd62019022: "", 
      //
      showToolbar: true,
      slots: [
        {
          values: []
        }
      ],
      popupVisible: false,
      popupVisible1: false,
      popupVisible2: false,
      popupVisible3: false,
      carTags:{},
      rlTags:{},
      message: "",
      flag: "hlymc",
      currentTags: {},
      currentTags1: {},
      slotsJjfs: [
        {
          values: [
            {code:"1",name:"整车计"},
            {code:"2",name:"体积计"},
            {code:"3",name:"重量计"},
            {code:"9",name:"其他"},
          ]
        }
      ],
      first: '', 
      second: '', 
      third: '',
      iosProvinces: '',
      iosCitys: '',
      iosCountys: '',
      slotss: [{
                    flex: 1,
                    values: [],
                    className: 'slot1',
                    textAlign: 'left',
                    defaultIndex: 0
                }, {
                    flex: 1,
                    values: [],
                    className: 'slot2',
                    textAlign: 'center',
                    defaultIndex: 0                    
                }, {
                    flex: 1,
                    values: [],
                    className: 'slot3',
                    textAlign: 'right',
                    defaultIndex: 0                    
              }],
      provinceValue: '',
      cityValue: '',
      countyValue: '',
      result: '',
      countyCode: '',
      slotsColor: [
        {
          values: [{"code":"1","flag":"Dcq","name":"蓝色"},
          {"code":"2","flag":"Dcq","name":"黄色"},
          {"code":"3","flag":"Dcq","name":"黑色"},
          {"code":"4","flag":"Dcq","name":"白色"},
          {"code":"5","flag":"Dcq","name":"黄绿"},
          {"code":"6","flag":"Dcq","name":"渐变绿"},
          {"code":"9","flag":"Dcq","name":"其他"},]
        }
      ],
      currentTagsColor: {},
      popupVisibleColor: false,
    };
  },
  created() {
      console.log(this.$route.query.yhmlk)
  },
  mounted() {
    this.getDate();
  },
  methods: {
    getDate(){
        let data = {};
        data.recid = this.$route.query.recid;
        this.axios.post('http://zxdc.catsic.com:9090/sampling/assit/selectFzdcbfd06', {'data': data}, {
              'headers': {
                  'Content-Type': 'application/json',
                  'mobileHeader': '{"sessionId":' + localStorage.getItem('sessionId') + '}'
              }
        }).then(result => {
          console.log(result );
            if (result.data.status == "1000") {
                  let fzdcbfd06 = result.data.data.Fzdcbfd06;
                  
                  this.recid = fzdcbfd06.recid,
                  this.yhmlk= fzdcbfd06.yhmlk,
                  this.fzdcbfd62019001 = fzdcbfd06.fzdcbfd62019001,
                  this.fzdcbfd62019019 = fzdcbfd06.plateColorCode,
                  this.currentTagsColor.name = this.getCarColorName(fzdcbfd06.plateColorCode);
                  this.fzdcbfd62019002 = fzdcbfd06.fzdcbfd62019002;
                  if(fzdcbfd06.fzdcbfd62019003 != undefined){
                      this.fzdcbfd62019003 = fzdcbfd06.fzdcbfd62019003.replace('/', '-').replace('/', '-');
                  }
                  if(fzdcbfd06.fzdcbfd62019004 != undefined){
                      this.fzdcbfd62019004 = fzdcbfd06.fzdcbfd62019004.replace('/', '-').replace('/', '-');
                  }                  
                  this.fzdcbfd62019005 = fzdcbfd06.fzdcbfd62019005,
                  this.fzdcbfd62019006 = fzdcbfd06.fzdcbfd62019006,
                  this.fzdcbfd62019007 = fzdcbfd06.fzdcbfd62019007,
                  this.fzdcbfd62019008 = fzdcbfd06.fzdcbfd62019008,
                  this.fzdcbfd62019009 = fzdcbfd06.fzdcbfd62019009,
                  this.currentTags.name = fzdcbfd06.fzdcbfd62019009,
                  this.fzdcbfd62019010 = fzdcbfd06.fzdcbfd62019010,
                  this.fzdcbfd62019011 = fzdcbfd06.fzdcbfd62019011,
                  this.fzdcbfd62019012 = fzdcbfd06.fzdcbfd62019012,
                  this.fzdcbfd62019013 = fzdcbfd06.fzdcbfd62019013,
                  this.fzdcbfd62019014 = fzdcbfd06.fzdcbfd62019014,
                  this.fzdcbfd62019015 = fzdcbfd06.fzdcbfd62019015,
                  this.fzdcbfd62019016 = fzdcbfd06.fzdcbfd62019016,
                  this.fzdcbfd62019017 = this.getJjfsName(fzdcbfd06.fzdcbfd62019017),
                  this.fzdcbfd62019018 = fzdcbfd06.fzdcbfd62019018,
                  this.fzdcbfd62019022 = fzdcbfd06.fzdcbfd62019022,
                  this.floatorder = fzdcbfd06.floatorder,
                  console.log(result);
            }
        }, error => {
              console.log("getyhcars request error:" + error);
        });
    },
    // 校验条件
    check(){
      if(this.fzdcbfd62019001 == ''){
          Toast("车牌号码不能为空！");
      } else if(this.fzdcbfd62019019 == ''){
          Toast("车牌颜色不能为空！");
      } else if(this.fzdcbfd62019002 == ''){
          Toast("趟次序号不能为空！");
      } else if(this.fzdcbfd62019003 == ''){
          Toast("开始日期不能为空！");
      } else if(this.fzdcbfd62019004 == ''){
          Toast("结束日期不能为空！");
      } else if(this.fzdcbfd62019005 == ''){
          Toast("起点名称不能为空！");
      } else if(this.fzdcbfd62019007 == ''){
          Toast("终点名称不能为空！");
      } else if(this.fzdcbfd62019009 == ''){
          Toast("货物种类名称不能为空！");
      }  else if(this.fzdcbfd62019009 == '其他' && this.fzdcbfd62019022 == ''){
          Toast("详细货物名称不能为空！");
      } else if(this.fzdcbfd62019011 == ''){
          Toast("载货里程（公里）不能为空！");
      } else if(this.fzdcbfd62019012 > this.fzdcbfd62019011){
          Toast("高速公路里程应小于等于载货里程！");
      } else if(this.fzdcbfd62019013 == ''){
          Toast("货运量（吨）不能为空！");
      } else if(this.fzdcbfd62019013 > 100){
          Toast("货运量应小于等于100吨！");
      } else if(this.fzdcbfd62019014 == ''){ 
          Toast("货物周转量（吨公里）不能为空！");
      } else if(this.fzdcbfd62019014 > this.fzdcbfd62019011*this.fzdcbfd62019013){ 
          Toast("载货里程乘以货运量应大于等于货物周转量！");
      } else if((this.fzdcbfd62019016 != "" && this.fzdcbfd62019016 != undefined) && (this.fzdcbfd62019017 == "" && this.fzdcbfd62019017 == undefined)){
          Toast("收入和计价方式两者同时填写或同时不填。");
      } else if((this.fzdcbfd62019016 == "" && this.fzdcbfd62019016 == undefined) && (this.fzdcbfd62019017 != "" && this.fzdcbfd62019017 != undefined)){
          Toast("收入和计价方式两者同时填写或同时不填。");
      } else {
          this.commit(); 
      }
    },
    commit() {
      let data = {};
      let fzdcbfd06 = {};
    //   console.log('ykkkk-->>'+this.$route.query.yhmlk)
    
        (fzdcbfd06.recid = this.recid),
        (fzdcbfd06.yhmlk = this.yhmlk = this.$route.query.yhmlk),
        (fzdcbfd06.fzdcbfd62019001 = this.fzdcbfd62019001),
        (fzdcbfd06.fzdcbfd62019002 = this.fzdcbfd62019002),
        (fzdcbfd06.fzdcbfd62019003 = this.fzdcbfd62019003.replace(/-/g,'/')),
        (fzdcbfd06.fzdcbfd62019004 = this.fzdcbfd62019004.replace(/-/g,'/')),
        (fzdcbfd06.fzdcbfd62019005 = this.fzdcbfd62019005),
        (fzdcbfd06.fzdcbfd62019006 = this.fzdcbfd62019006),
        (fzdcbfd06.fzdcbfd62019007 = this.fzdcbfd62019007),
        (fzdcbfd06.fzdcbfd62019008 = this.fzdcbfd62019008),
        (fzdcbfd06.fzdcbfd62019009 = this.fzdcbfd62019009),
        (fzdcbfd06.fzdcbfd62019010 = this.fzdcbfd62019010),
        (fzdcbfd06.fzdcbfd62019011 = this.fzdcbfd62019011),
        (fzdcbfd06.fzdcbfd62019012 = this.fzdcbfd62019012),
        (fzdcbfd06.fzdcbfd62019013 = this.fzdcbfd62019013),
        (fzdcbfd06.fzdcbfd62019014 = this.fzdcbfd62019014),
        (fzdcbfd06.fzdcbfd62019015 = this.fzdcbfd62019015),
        (fzdcbfd06.fzdcbfd62019016 = this.fzdcbfd62019016),
        (fzdcbfd06.fzdcbfd62019017 = this.getJjfsCode(this.fzdcbfd62019017)),
        (fzdcbfd06.fzdcbfd62019018 = this.fzdcbfd62019018),
        (fzdcbfd06.fzdcbfd62019019 = this.fzdcbfd62019019),
        (fzdcbfd06.fzdcbfd62019022 = this.fzdcbfd62019022),
        (fzdcbfd06.floatorder = this.floatorder),
        (data.fzdcbfd06= fzdcbfd06),
        console.log("tijiao-->>"+JSON.stringify(data.fzdcbfd06))
        this.axios
          .post(
            "http://zxdc.catsic.com:9090/sampling/assit/modifyFzdcbfd06",
            { data: data },
            {
              headers: {
                "Content-Type": "application/json",
                mobileHeader:
                  '{"sessionId":' + localStorage.getItem("sessionId") + "}"
              }
            }
          )
          .then(
            result => {
              console.log("---"+JSON.stringify(result));
              if (result.data.status == "1000") {
                console.log("保存成功");
                
                this.goback();
              }
            },
            error => {
              console.log("getyhcars request error:" + error);
            }
          );
    },
    // 选择车牌颜色
    choseColor() {  
      this.popupVisibleColor = true;
    },
    //车牌颜色
    handleConfigColor: function() {
      this.currentTagsColor = this.$refs.pickerColor.getValues()[0];
      this.fzdcbfd62019019 = this.currentTagsColor.code;
      this.popupVisibleColor = false;
    },
    // 选择货物种类
    choseHwzl() {
      this.$http.get("http://zxdc.catsic.com:9090/sampling/json/carTyps").then(
        response => {
          this.slots[0].values = response.data.hwzl;
          this.popupVisible = true;
        },
        response => {
          console.log("数据加载失败");
        }
      );
    },
    choseJjfs(){
          this.popupVisible3 = true;
    },
    handleConfig1: function() {
      this.currentTags1 = this.$refs.pickerJjfs.getValues()[0];
      this.fzdcbfd62019017 = this.currentTags1.name;
      this.popupVisible3 = false;
    },
    // 弹出框点击确定按钮点击事件 add by qzn 20190627
    handleConfig: function() {
      this.currentTags = this.$refs.picker.getValues()[0];
      this.fzdcbfd62019010 = this.currentTags.code;
      this.fzdcbfd62019009 = this.currentTags.name;
      this.popupVisible = false;
    },
    showStart1(){
      this.axios.get("http://zxdc.catsic.com:9090/sampling/json/city").then(
        response => {
          console.log("数据加载成功");
      
          this.slotss[0].values = response.data.iosProvinces;
          this.iosProvinces = response.data.iosProvinces;
          
          this.slotss[1].values = response.data.iosCitys;
          this.iosCitys = response.data.iosCitys;

          this.slotss[2].values = response.data.iosCountys;
          this.iosCountys = response.data.iosCountys;
          

          this.popupVisible1 = true;
        },
        response => {
          console.log("数据加载失败");
        }
      );
    },
    showStart2(){
      this.axios.get("http://zxdc.catsic.com:9090/sampling/json/city").then(
        response => {
          console.log("数据加载成功");
          console.log(response);
          this.slotss[0].values = response.data.iosProvinces;
          this.iosProvinces = response.data.iosProvinces;
          
          this.slotss[1].values = response.data.iosCitys;
          this.iosCitys = response.data.iosCitys;

          this.slotss[2].values = response.data.iosCountys;
          this.iosCountys = response.data.iosCountys;
          

          this.popupVisible2 = true;
        },
        response => {
          console.log("数据加载失败");
        }
      );
    },
    // 点击确定按钮
        sure(){
            var show = false;
            //var result = this.result;
            var province = this.provinceValue;
            var city = this.cityValue;
            var county = this.countyValue;
            
            this.fzdcbfd62019005 = province+"-"+city+"-"+county;
            this.fzdcbfd62019006 = this.countyCode;
            this.popupVisible1 = false;
            //console.log(show,result, province, city, county,"---"+this.fzdcbfd12019005);
        },
        sure1(){
            var show = false;
            //var result = this.result;
            var province = this.provinceValue;
            var city = this.cityValue;
            var county = this.countyValue;
            
            this.fzdcbfd62019007 = province+"-"+city+"-"+county;
            this.fzdcbfd62019008 = this.countyCode;
            this.popupVisible2 = false;
            //console.log(show,result, province, city, county,"---"+this.fzdcbfd12019006);
        },
        // 筛选器值变化时调用
        onValuesChange1(picker, values) {
            var cityArray = [],
                countyArray = [];
            if(values[0]){          
                for(let i=0; i<this.iosCitys.length; i++){
                    if(values[0].id == this.iosCitys[i].parentId){
                        cityArray.push(this.iosCitys[i]);
                    }
                }
                picker.setSlotValues(1, cityArray); 
            } 

            if(values[1]){                         
                for(let j=0; j<this.iosCountys.length; j++){
                    if(values[1].id == this.iosCountys[j].parentId){
                        countyArray.push(this.iosCountys[j]);
                    }
                }
                picker.setSlotValues(2, countyArray);
            }
            var result = this.result;
            
            if(typeof(values[1]) == 'object' && typeof(values[2]) == 'object'){
                result = values[0].value + values[1].value + values[2].value;
                this.provinceValue = values[0].value;
                this.cityValue = values[1].value;
                this.countyValue = values[2].value;
                this.countyCode = values[2].id;
                
                for(let i=0; i<this.iosProvinces.length; i++){
                    if(this.iosProvinces[i].value == this.province){
                        this.first = i;
                    }
                }
                for(let i=0; i<this.cityArray.length; i++){
                    if(this.city == cityArray[i].value){
                        this.second = i;
                    }
                }
                for(var j=0; j<countyArray.length; j++){
                    if(this.county == countyArray[j].value){
                        this.third = j;
                    }
                }
                this.slotss[0].defaultIndex = parseInt(this.first);
                this.slotss[1].defaultIndex = parseInt(this.second);
            }else if(typeof(values[1]) != 'object' && typeof(values[2]) == 'object'){
                values[1] = this.iosCitys;
                result = values[0].value + this.city + values[2].value;
                this.provinceValue = values[0].value;
                this.cityValue = this.city;
                this.countyValue = values[2].value;
                this.countyCode = values[2].id;
            }
             this.result = result;
        },
    getJjfsName(code) {
                  var goodsTypes = [
                    {
                      code: "1",
                      name: "整车计"
                    },
                    {
                      code: "2",
                      name: "体积计"
                    },
                    {
                      code: "3",
                      name: "重量计"
                    },
                    {
                      code: "9",
                      name: "其他"
                    }
                  ];
                  var name;
                  goodsTypes.forEach(item => {
                    if (item.code === code) {
                      name = item.name;
                    }
                  });
                  return name;
              },
              // 获取车牌颜色名称
                getCarColorName(code) {
                  var goodsTypes = [
                    {
                      code: "1",
                      name: "蓝色"
                    },
                    {
                      code: "2",
                      name: "黄色"
                    },
                    {
                      code: "3",
                      name: "黑色"
                    },
                    {
                      code: "4",
                      name: "白色"
                    },
                    {
                      code: "5",
                      name: "黄绿"
                    },
                    {
                      code: "6",
                      name: "渐变绿"
                    },
                    {
                      code: "9",
                      name: "其他"
                    }
                  ];
                  var name;
                  goodsTypes.forEach(item => {
                    if (item.code === code) {
                      name = item.name;
                    }
                  });
                  return name;
              },
              getJjfsCode(name) {// 获取货物类型名称
                  var goodsTypes = [
                    {
                      code: "1",
                      name: "整车计"
                    },
                    {
                      code: "2",
                      name: "体积计"
                    },
                    {
                      code: "3",
                      name: "重量计"
                    },
                    {
                      code: "9",
                      name: "其他"
                    }
                  ];
                  var code;
                  goodsTypes.forEach(item => {
                    if (item.name === name) {
                      code = item.code;
                    }
                  });
                  return code;
              },
    goback() {
      this.$router.go(-1);
    }
  }
};
</script>
    
    <style lang="scss" scoped>
.tb {
  padding-top: 10px;
}

.mint-cell {
  background-color: #efeff4;
}
input[type="number"] {
  line-height: 21px;
  width: 100%;
  height: 40px;
  margin-bottom: 0px;
  padding: 10px 15px;
  -webkit-user-select: text;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  outline: 0;
  background-color: #fff;
  -webkit-appearance: none;
}
.button {
  padding-top: 3%;
  padding-left: 5%;
  padding-right: 5%;
  padding-bottom: 5%;
}
.picker-toolbar-title {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  height: 200px;
  line-height: 40px;
  font-size: 16px;
  width: 100%;
}
.usi-btn-cancel,
.usi-btn-sure {
  color: #26a2ff;
}
.mint-popup-bottom {
  width: 100%;
  top: auto;
  right: auto;
  bottom: 0;
}
</style>